import React from 'react';
import './-page.scss';
import {observable} from 'mobx.collection';
import {DateFormat} from "auxiliaries/extends/format";
import Avatar from "components/data/avatar";
import {DictController} from "api/dict";
import {REQUEST_STATE} from "fetchState";
import * as TYPES from 'auxiliaries/extends/enum';

class UserHeaderControlComponent extends React.Component {
    @observable IndustryList = [];
    // @observable SkillsList = [];

    componentDidMount() {
        // this.setSkillsList();
        this.setIndustryList();
    }

    // async setSkillsList() {
    //     let {DATA, STATUS, CODE} = await DictController.GetSkillsList();
    //     if (CODE === REQUEST_STATE.CANCEL) {
    //         return;
    //     }
    //
    //     if (STATUS === 0) {
    //         this.SkillsList = DATA;
    //     }
    // }

    async setIndustryList() {
        let {DATA, STATUS, CODE} = await DictController.GetIndustryList();
        if (CODE === REQUEST_STATE.CANCEL) {
            return;
        }

        if (STATUS === 0) {
            this.IndustryList = DATA;
        }

    }

    render() {
        let {
            user = {}
        } = this.props || {};

        let industryName = this.IndustryList.find(x => x.Id === user.Industry)?.Name;
        // let skillsName = this.SkillsList.find(x => x.Id === user.Skills)?.Name;

        return (
            <div className={"--user-header-container"}>
                <Avatar src={user.ImgUrl}/>
                <div className="name font-size-34">
                    <span>{user.TrueName || '--'}</span>
                </div>
                <div className="work-list font-size-24">
                    <span>{industryName || '--'}</span>
                    {/*<span>{skillsName || '--'}</span>*/}
                    <span>{user.Skills || '--'}</span>
                </div>
                <div className="work-info font-size-28">
                    <span>{user.OrgName || '--'}</span>
                    <span>{user.Title || '--'}</span>
                </div>
            </div>
        );
    }
}

class UserIdAuthorityComponent extends React.Component {
    @observable IndustryList = [];
    @observable SkillsList = [];
    @observable MemberList = DictController.GetMemberLevel();

    async componentDidMount() {
        this.SkillsList = await TYPES.GetEnumList(TYPES.Skills);
        this.IndustryList = await TYPES.GetEnumList(TYPES.Industry);
    }

    render() {
        let user = this.props.user;
        // let industryName = this.IndustryList.find(x => x.Id === user.Industry)?.Name;
        // let skillsName = this.SkillsList.find(x => x.Id === user.Skills)?.Name;
        let memberName = TYPES.GetEnumDescSync(this.MemberList, user.Level);

        return (
            <div className={"--user-header-container --user-id-authority"}>
                <Avatar src={user.ImgUrl}/>
                <div className="name font-size-30">
                    <span>{user.TrueName}</span>
                </div>
                <div className="work-info font-size-24">
                    <span>{user.OrgName || '--'}</span>
                    <span>{user.Title || '--'}</span>
                </div>
                <div className="-user-type font-size-30">
                    <span>{memberName}</span>
                </div>
                <div className="-user-info font-size-24">
                    <span>{"有效期："}</span>
                    <span>{user.LevelExpire ? DateFormat(user.LevelExpire, 'yyyy.mm.dd') : "永久"}</span>
                </div>
            </div>
        );
    }
}

export default UserHeaderControlComponent;

export {
    UserIdAuthorityComponent
}